<template>
    <!-- 个人基础信息 -->
    <MemberInfo :data="memberInfoData"></MemberInfo>
    <!-- 增加教育经历 -->
    <div class="jl">
        <div class="addJy" @click="addEduction">
            增加教育经历+
        </div>
        <el-table class="baseTable" :data="educationList" border style="width: 100%">
            <el-table-column prop="education" label="学历" align="center" />
            <el-table-column prop="school" label="学校" align="center" />
            <el-table-column prop="major" label="专业" align="center" />
            <el-table-column prop="graduationTime" label="毕业时间" align="center" />
            <el-table-column prop="notes" label="荣誉/备注" align="center" />
            <el-table-column label="操作" width="120" align="center">
                <template #default="scope">
                    <el-button size="small" link @click="editEducation(scope.$index, scope.row as EducationModel)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确认删除吗？">
    <template #reference>
        <el-button size="small" link type="danger"
                        @click="deleteEducation(scope.$index, scope.row as EducationModel)">
                        删除
                    </el-button>
                 </template>
  </el-popconfirm>


                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 增加工作经历 -->
    <div class="jl">
        <div class="addGz" @click="addWork">
            增加工作经历+
        </div>
        <el-table :data="workList" border style="width: 100%">
            <el-table-column prop="post" label="岗位名称"  align="center"/>
            <el-table-column prop="position" label="职位类型"  align="center"/>
            <el-table-column prop="company" label="公司名称" align="center" />
            <el-table-column prop="notes" label="职位描述"  align="center"/>
            <el-table-column prop="entryDate" label="入职时间"  align="center"/>
            <el-table-column prop="resignDate" label="离职时间"  align="center"/>

            <el-table-column label="操作" align="center" width="120">
                <template #default="scope">
                    <el-button size="small" link @click="editWork(scope.$index, scope.row as WorkModel)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确认删除吗？">
    <template #reference>
        <el-button size="small" link type="danger" @click="deleteWork(scope.$index, scope.row as WorkModel)">
                        删除
                    </el-button>
                 </template>
  </el-popconfirm>


                </template>
            </el-table-column>
        </el-table>
    </div>
    <BaseDialog v-model:visible="isShow_jy" :title="educationTitle" width="40%">
        <template #header>
            <h2 class="custom-title">{{ educationTitle }}</h2>
        </template>

        <div class="content">
            <el-form label-width="auto" style="width:95%;padding:0 20px;margin: 0 auto;" :rules="rules"
                :model="educationForm" ref="ruleFormRef">
                <el-form-item label="学历" prop="education">
                    <el-select placeholder="请选择学历" v-model="educationForm.education" size="large">
                        <el-option label="大专" value="大专" />
                        <el-option label="本科" value="本科" />
                        <el-option label="硕士" value="硕士" />
                        <el-option label="博士" value="博士" />
                        <el-option label="其他" value="其他" />
                    </el-select>
                </el-form-item>
                <el-form-item label="学校" prop="school">
                    <el-input v-model="educationForm.school" placeholder="请输入学校名称" size="large" />
                </el-form-item>
                <el-form-item label="专业" prop="major">
                    <el-input v-model="educationForm.major" placeholder="请输入专业名称" size="large" />
                </el-form-item>

                <el-form-item label="毕业时间">
                    <el-date-picker type="date" size="large" :format="'YYYY-MM-DD'" value-format="YYYY-MM-DD" placeholder="请选择毕业时间" v-model="educationForm.graduationTime"
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="荣誉">
                    <el-input v-model="educationForm.notes" placeholder="请输入荣誉" size="large" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="cancelEducation">取消</el-button>
                    <el-button type="primary" @click="submitEduction(ruleFormRef)">提交</el-button>
                </el-form-item>
            </el-form>
        </div>


    </BaseDialog>
    <BaseDialog v-model:visible="isShow_gz" :title="workTitle" width="40%">
        <template #header>
            <h2 class="custom-title">{{ workTitle }}</h2>
        </template>

        <div class="content">
            <el-form label-width="auto" style="width:95%;padding:0 20px;margin: 0 auto;" :rules="workRules"
                :model="workForm" ref="workFormRef">
                <el-form-item label="公司名称：" prop="company">
                    <el-input v-model="workForm.company" placeholder="请输入公司名称" size="large" />
                </el-form-item>
                <el-form-item label="岗位名称：" prop="post">
                    <el-input v-model="workForm.post" placeholder="请输入岗位名称" size="large" />
                </el-form-item>
                <el-form-item label="职位类型：" prop="position">
                    <el-input v-model="workForm.position" placeholder="请输入职位类型" size="large" />
                </el-form-item>
                <el-form-item label="职位描述：" prop="notes">
                    <el-input v-model="workForm.notes" placeholder="请输入职位描述" size="large" />
                </el-form-item>
                <el-form-item label="入职时间：">
                    <el-date-picker type="date" placeholder="选择入职时间" :format="'YYYY-MM-DD'" value-format="YYYY-MM-DD" size="large" v-model="workForm.entryDate"
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="离职时间：">
                    <el-date-picker type="date" placeholder="选择离职时间" :format="'YYYY-MM-DD'" value-format="YYYY-MM-DD" size="large" v-model="workForm.resignDate"
                        style="width: 100%" />
                </el-form-item>

                <el-form-item>
                    <el-button @click="cancelWork">取消</el-button>
                    <el-button type="primary" @click="submitWork(workFormRef)">提交</el-button>
                </el-form-item>
            </el-form>
        </div>


    </BaseDialog>
</template>
<script setup lang="ts">
import { FormRules, FormInstance, ElMessage } from 'element-plus'
import BaseDialog from "../../components/DiaLog.vue"
import { cloneDeep } from 'lodash';
import eventBus from '@/event/mitt';
import type { MemberModel, EducationModel, WorkModel } from "@/api/member/index"
import { saveEducation, removeEducation, saveWork, removeWork } from "@/api/member/index"
import MemberInfo from '@/components/person/MemberInfo.vue';
const educationForm = ref<EducationModel>({ id: '', education: '', school: '', major: '', graduationTime: '', notes: '' })
const workForm = ref<WorkModel>({ id: '', company: '', position: '', entryDate: '', resignDate: '', post: '', notes: '' })
const memberInfoData = ref<MemberModel>({ id: '', idCar: '', name: '', postal: '', email: '', phone: '', address: '', surname: '', eName: '', birthday: '', province: '', city: '', eAddress: '', workList: [], igAasId: '', educationList: [], createTime: '' })
interface Props {
    data?: MemberModel
}
const props = defineProps<Props>();
watch(() => props.data, (newData) => {
    if (newData) {
        memberInfoData.value = { ...newData };
    }
}, { immediate: true });
const educationList = ref<EducationModel[]>([])
const workList = ref<WorkModel[]>([])

eventBus.on('memberInfo', (data: any) => {
    memberInfoData.value = cloneDeep(data)
    console.log(data,'info')
    educationList.value = memberInfoData.value.educationList
    workList.value =  memberInfoData.value.workList
}
)
// onMounted(async () => {
//     const res = await memberInfoApi()
//     if (res.code === 200) {
//         memberInfoData.value = cloneDeep(res.data) ?? {
//             id: '', idCar: '', name: '', email: '', postal: '', phone: '', address: '', surname: '', eName: '', birthday: '', province: '', city: '', eAddress: '', workList: [], igAasId: '', educationList: [], createTime: ''
//         }
//         educationList.value = memberInfoData.value.educationList
//         workList.value =  memberInfoData.value.workList
//     } 
// })




let isShow_jy = ref(false);
let isShow_gz = ref(false);
const educationTitle = ref<string>('添加教育经历')


const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules<EducationModel>>({
    education: [
        {
            required: true,
            message: "请输入学历",
            trigger: "blur",
        },
    ],
    school: [{ required: true, message: "请输入学校", trigger: "blur" }],
    major: [{ required: true, message: "请输入专业", trigger: "blur" }],
});

async function submitEduction(formEl: FormInstance | undefined) {
    console.log(educationForm.value);
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            const response = await saveEducation(educationForm.value)
            if (response.code == 200) {
                ElMessage.success('保存成功')
                isShow_jy.value = false
                if(educationForm.value.id===''){
                    educationList.value.push(response.data as EducationModel)
                }else{
                    const index = educationList.value.findIndex(item => item.id === educationForm.value.id);
                        if (index !== -1) {
                            educationList.value[index] = response.data as EducationModel; // 类型断言
                        }
                }

            } else {
                ElMessage.error(response.msg)
            }
        } else {
            console.log('error submit!', fields)
        }
    })

}
//教育经历编辑
const editEducation = (index: number, row: EducationModel) => { 
    educationForm.value = cloneDeep(row) ?? {
        id: '', education: '', school: '', major: '', graduationTime: '', notes: ''
    }
    isShow_jy.value = true
    educationTitle.value = '编辑教育经历'
}

const deleteEducation = async (index: number, row: EducationModel) => { 
    const response = await removeEducation(row.id)
    if (response.code == 200) {
        educationList.value.splice(index, 1)
    } else {
        ElMessage.error(response.msg)
    }
}

const addEduction = () => {
    isShow_jy.value = true
    educationTitle.value = '增加教育经历'
    educationForm.value = cloneDeep({ id: '', education: '', school: '', major: '', graduationTime: '', notes: '' })
}
const cancelEducation = () => {
    isShow_jy.value = false
    educationForm.value = cloneDeep({ id: '', education: '', school: '', major: '', graduationTime: '', notes: '' })
}
const workTitle = ref<string>('添加工作经历')
const workFormRef = ref<FormInstance>();

const workRules = reactive<FormRules<WorkModel>>({
    company: [
        {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
        },
    ],
    position: [{ required: true, message: "请输入职位名称", trigger: "blur" }],
    post: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
    notes: [{ required: true, message: "请输入职位描述", trigger: "blur" }],
})
const submitWork = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            const response = await saveWork(workForm.value)
            if (response.code == 200) {
                 isShow_gz.value = false
                if(workForm.value.id===''){
                    workList.value.push(response.data as WorkModel)
                }else{
                    const index = workList.value.findIndex(item => item.id === workForm.value.id);
                        if (index !== -1) {
                            workList.value[index] = response.data as WorkModel; // 类型断言
                        }
                }

            } else {
                ElMessage.error(response.msg)

            }
        } else {
            console.log('error submit!', fields)
        }
    })

}

const cancelWork = () => {
    isShow_gz.value = false
    workForm.value = cloneDeep({ id: '', company: '', position: '', entryDate: '', resignDate: '', post: '', notes: '' })
}

function addWork() {
    workTitle.value = '添加工作经历'
    isShow_gz.value = true
    workForm.value = cloneDeep({ id: '', company: '', position: '', entryDate: '', resignDate: '', post: '', notes: '' })
}

function editWork(index: number, row: WorkModel) {
    workTitle.value = '编辑工作经历'
    workForm.value = cloneDeep(row) ?? {
        id: '', company: '', position: '', entryDate: '', resignDate: '', post: '', notes: ''
    }
    isShow_gz.value = true
}
async function deleteWork(index: number, row: WorkModel) {
    const res = await removeWork(row.id)
    if (res.code === 200) {
        workList.value.splice(index, 1)
    } else {
        ElMessage.error(res.msg)
    }
}

</script>
<style scoped lang='less'>
.row {
    display: flex;
    justify-content: flex-start;
    justify-content: space-around;
    padding: 0 20px;
}

.btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jg {
    margin: 0 10px;
}

.addJy {
    width: 160px;
    line-height: 48px;
    font-size: 18px;
    color: #fefefe;
    text-align: center;
    background-color: #345aa3;
    border-radius: 24px;
    margin-top: 40px;
    margin-bottom: 30px;
    cursor: pointer;
}

.addGz {
    width: 160px;
    line-height: 48px;
    font-size: 18px;
    color: #fefefe;
    text-align: center;
    background-color: #345aa3;
    border-radius: 24px;
    margin-top: 40px;
    margin-bottom: 30px;
    cursor: pointer;
}

.jl {
    padding: 0 65px;
}

:deep(.el-form-item__content) {
    justify-content: flex-end;
}

:deep(thead .el-table .cell) {
    line-height: 30px;
    text-align: center;
    font-size: 18px;
}

:deep(thead tr th) {
    background: #345aa3 !important;
    ;
    color: #ffffff;
}

:deep(.el-table tr) {
    background-color: #f6f6f68c;
}

:deep(.el-table__body) {
    background-color: #f6f6f68c;
}

:deep(.btns .el-form-item) {
    width: fit-content;
}

.form-mainInfo .row .el-form-item {
    width: 46%;
}

.form-mainInfo .row .el-form-item__content {
    text-align: left;
}

.form-mainInfo .row .el-radio-group {
    width: 100%;
}

:deep(.el-date-editor.el-input) {
    width: 100%;
}

:deep(.el-form-item__label) {
    width: 100px;
}

:deep(.el-divider__text) {
    margin-bottom: 22px;
    color: #345aa3;
    font-weight: 600;
    padding: 0 10px;
    font-size: 20px;
}

:deep(th .cell) {
    box-sizing: border-box;
    line-height: 35px;
    overflow: hidden;
    overflow-wrap: break-word;
    padding: 0 12px;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 18px;
    text-align: center;
    font-weight: normal;
}
</style>
